<template>
  <div class="nestpie-chart-wrapper">
    <div class="pie-chart-container" ref="chartContainer"></div>
    <div class="legend">
      <custom-legend
        :legens="item"
        direction="column"
        :ref="`legen${index}`"
        v-for="(item, index) in legens"
        :key="index"
        class="legend-item"
      ></custom-legend>
    </div>
  </div>
</template>

<script>
import CustomLegend from '@/components/common/customLegend.vue'
export default {
  components: { CustomLegend },
  data() {
    return {
      myChart: {},
      legens: []
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    colors: {
      type: Array,
      default: () => []
    }
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {
    data: {
      handler: function() {
        // this.handleData()
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    handleData() {
      for (let i = 0; i < this.data.length; i++) {
        let obj = {}
        let arr = []
        obj.name = this.data[i].name
        obj.color = this.colors[i]
        obj.unSelect = false
        obj.value = this.data[i].value
        obj.unit = '%'
        arr.push(obj)
        this.legens.push(arr)
      }
    },
    init() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.handleData()
      let tl = new TimelineMax({})
      this.myChart = this.$echarts.init(this.$refs.chartContainer)
      let option = this.getOption()
      this.myChart.setOption(option)
      this.$nextTick(() => {
        this.legens.forEach((v, i) => {
          tl.add(this.$refs['legen' + i][0].init(), i * 0.2 + 0.3)
        })
      })
      this.index = -1
      this.timer = setInterval(() => {
        this.index++
        if (this.index >= this.data.length) {
          this.index = 0
        }
        this._autoPlay(this.index, this.data.length)
      }, 5000)
      return tl
    },

    _autoPlay(i, length) {
      for (let index = 0; index < length; index++) {
        this.$refs['legen' + index][0].back()
      }
      this.$refs['legen' + i][0].update()

      this.myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: i
      })
      this.myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: i - 1 < 0 ? length - 1 : i - 1
      })
    },
    getOption() {
      let option = {
        series: [
          {
            type: 'pie',
            selectedMode: 'single',
            hoverOffset: 4,
            radius: ['55%', '90%'],
            center: ['50%', '50%'],
            color: this.colors,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.data
          },
          {
            // 内层线
            type: 'pie',
            radius: ['51%', '51%'],
            itemStyle: {
              normal: {
                borderColor: '#035ef0'
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            // 内层线
            type: 'pie',
            radius: ['45%', '45%'],
            itemStyle: {
              normal: {
                borderColor: 'rgba(0,247,250,0.1)'
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            // 内层线
            type: 'pie',
            radius: ['0%', '38%'],
            itemStyle: {
              normal: {
                color: 'rgba(3,94,240,0.08)'
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            // 内层线
            type: 'pie',
            radius: ['0%', '32%'],
            itemStyle: {
              normal: {
                color: 'rgba(3,94,240,0.1)'
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            // 外层线
            type: 'pie',
            radius: ['94%', '94%'],
            itemStyle: {
              normal: {
                borderColor: '#035ef0'
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          }
        ]
      }
      return option
    }
  }
}
</script>
<style lang="scss" scoped>
.nestpie-chart-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  .pie-chart-container {
    width: 215px;
    height: 180px;
    margin-top: 25px;
  }
  .legend {
    width: 200px;
    height: 180px;
    padding-top: 44px;
    .legend-item {
      margin-bottom: 12px;
    }
    /deep/ .custom-legend .legen-list .legen-item .legen-name {
      width: 110px !important;
    }
  }
}
</style>
